<template>
  <div class="user_add_container">
    <el-form :model="user" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="userId">
        <el-input type="text" v-model="user.userId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="text" v-model="user.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="user.sex" placeholder="请选择">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="user.age"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="imageUrl">
        <el-upload class="upload-demo" action="http://localhost:9999/user/imageUpload" :on-exceed="handleExceed"
          :on-remove="handleRemove" :file-list="fileList" list-type="picture" :limit="1"
          :headers="{ 'Authorization': token }" :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input type="text" v-model="user.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="user.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-radio-group v-model="user.roleId">
          <el-radio v-for="item in roleList" :key="item.roleId" :label="item.rolename"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话" prop="phoneNumber">
        <el-input type="text" v-model="user.phoneNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-radio-group v-model="user.departId">
          <el-radio v-for="item in departList" :key="item.departId" :label="item.departName"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(user)">确定</el-button>
        <el-button @click="cancer">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addOrUpdate } from '@/api/api'

export default {
  data () {
    return {
      user: JSON.parse(this.$route.query.user),
      departList: [],
      roleList: [],
      fileList: [],
      token: this.$store.state.token
    }
  },
  methods: {
    submitForm (user) {
      const params = {
        id: user.id,
        userId: user.userId,
        password: user.password,
        sex: user.sex,
        age: user.age,
        imageUrl: user.imageUrl,
        email: user.email,
        name: user.name,
        roleId: user.roleId,
        phoneNumber: user.phoneNumber,
        departId: user.departId
      }

      addOrUpdate(params).then(res => {
        // console.log(res.data)
        if (res.data.code === 200) {
          if (this.user.id === this.$store.state.currentId) {
            this.$store.commit('setUserId', this.user.userId)
            this.$store.commit('setImageUrl', this.user.imageUrl)
          }
          this.$router.push('/user')
          console.log(res.data)
          this.$message('添加成功')
        } else {
          this.$message.warning('添加失败！请重试')
        }
      })
    },
    cancer () {
      this.$router.back()
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
      this.fileList = []
      this.user.imageUrl = ''
      // console.log(this.fileList, this.user.imageUrl)
    },
    handleExceed () {
      this.$message.warning('只能上传一张图片')
    },
    handleSuccess (res, file, fileList) {
      this.user.imageUrl = 'http://localhost:9999/view/' + file.name
      // console.log(this.user.imageUrl, fileList)
    },
    beforeAvatarUpload (file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG) {
        this.$message.warning('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.warning('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  },
  mounted () {
    // console.log(this.user)
    // 初始化头像列表
    const obj = {}
    obj.url = this.user.imageUrl
    this.fileList.push(obj)
  }
}

</script>

<style lang="scss" scoped>
.user_add_container {
  width: 50%;
  margin-left: 25%;
}

.el-form-item__label {
  margin-bottom: 10px;
}
</style>
